<template>
<div class="tab-panel">
  <div class="tabs">
    <el-tabs v-model="activeName" @tab-click="tabClickHandle">
      <el-tab-pane v-for="(item, key) in tabListProxy" :label="item.label" :name="item.name" :key="key"
      ></el-tab-pane>
    </el-tabs>
  </div>
  <div class="panels" v-if="!onlyData">
    <div :class="{'panel': true, 'active': item.name==activeName}" 
      v-for="(item, key) in tabListProxy"
      :key="key"
    >
      <slot :name="item.name" :tab="item"
      ></slot>
    </div>
  </div>
  <div class="panels" v-if="onlyData">
    <slot name="onlyData"></slot>
    <!-- <div class="panel">
      onlydata
      <slot name="onlyData"></slot>
    </div> -->
  </div>
</div>
</template>

<style lang="scss" scoped>
.tab-panel{
  display: flex;
  height: 100%;
  flex-flow: column;
  .tabs{
    flex: 0 0 auto;
    // padding-left: 15px;
    /deep/ .el-tabs__header{
      margin: 0;
      .el-tabs__nav-wrap{
        padding-left: 15px;
      }
    }
  }
  .panels{
    position: relative;
    flex: 1;
    .panel{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      // background: white;
      z-index: -1;
      &.active{
        z-index: 1;
      }
    }
  }
}
</style>

<script>

export default {
  name: 'tabPanel',
  components: {
  },
  props: {
    tabList: {
      type: Array,
      default: () => { return [] }
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    onlyData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    let _activeIdx = this.activeIndex && this.activeIndex < this.tabList.length ? this.activeIndex : 0
    return {
      activeName: this.tabList[_activeIdx].name,
      tabListProxy: this.tabList.map((item, index) => {
        return {
          ...item,
          created: _activeIdx === index // ? 1 : 0 // ? true : false
        }
      })
    }
  },
  computed: {

  },
  watch: {
    activeName(val) {
      let target = this.tabListProxy.find((item) => {
        return item.name === val
      })
      target.created = true
    }
  },
  methods: {
    tabClickHandle(tab) {
      this.$emit('on-tab-click', tab)
    }
  },
  mounted() {
    // console.log(this.activeName)
    // let _activeIdx = this.activeIndex && this.activeIndex < this.tabList.length ? this.activeIndex : 0
    // console.log('_activeIdx', _activeIdx)
    // this.activeName = this.tabList[_activeIdx].name
  }
}
</script>

